<template>
  <div class="phoneFrom">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      size="large"
    >
      <el-form-item prop="mobile">
        <div class="phone-input">
          <span>+86</span>
          <el-input v-model="ruleForm.mobile" placeholder="请输入手机号码"></el-input>
        </div>
      </el-form-item>
      <el-form-item prop="captcha">
        <div class="code-input">
          <el-input v-model="ruleForm.captcha" placeholder="请输入验证码"></el-input>
          <el-button v-if="!time" type="primary" @click="getCode">获取验证码</el-button>
          <el-button v-else type="primary">重新发送{{ time }}</el-button>
        </div>
      </el-form-item>
      <el-button :loading="isLoading" round style="width: 100%;" type="primary" @click="phoneLogin(ruleFormRef)">登录
      </el-button>

      <el-button link>忘记密码?</el-button>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ComponentSize, ElMessage, FormInstance, FormRules } from "element-plus";

import { Encrypt } from "@/utils/aes";
import { sendRegisterOrLoginCaptcha,loginByMobile } from "@/api/login";

interface RuleForm {
  mobile: string;
  captcha: string;
}
// 定义一个变量来接收element-plus的message实例
const ruleFormRef = ref<FormInstance>();
// 定义一个变量来接收验证码倒计时
const time = ref("");
// 定义一个变量来接收登录状态
const isLoading = ref(false);
// 定义一个变量来接收登录表单数据
const ruleForm = reactive<RuleForm>({
  mobile: "",
  captcha: ""
});
// 定义一个变量来接收登录表单验证规则
const validatePass = (rule: any, value: string, callback: any) => {
  if (value == "") {
    callback(new Error("请输入手机号码"));
  } else if (!/^1[3456789]\d{9}$/.test(value)) {
    callback(new Error("手机号码格式不正确"));
  } else {
    callback();
  }
};
// 定义一个变量来接收登录表单验证规则
const rules = reactive<FormRules<RuleForm>>({
  mobile: [
    { validator: validatePass, trigger: "blur" }

  ],
  captcha: [
    { required: true, message: "请输入验证码", trigger: "blur" }
  ]
});
// 定义一个函数来获取验证码
const getCode = async() =>  {
  //@ts-ignore
  let validate = await ruleFormRef.value.validateField('mobile',()=> null)
  console.log(validate);
  if (validate) {
    let res = await sendRegisterOrLoginCaptcha({
      mobile: Encrypt(ruleForm.mobile)
    })
    time.value = "60";
    let timer = setInterval(() => {
      time.value = (parseInt(time.value) - 1).toString();
      if (time.value === "0") {
        clearInterval(timer);
        time.value = "";
      }
    }, 1000);
    ElMessage.success('验证码发送成功！')
  }else{
    ElMessage.warning('请填写正确的手机号码！')
  }
return
};
// 定义一个函数来登录
const phoneLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      isLoading.value = true;
      let res = await loginByMobile({
        mobile: Encrypt(ruleForm.mobile),
        captcha: Encrypt(ruleForm.captcha)
      })
      console.log(res);
      if (res.code === '200') {
        isLoading.value = false;
        ElMessage.success('登录成功！')
      }else{
        ElMessage.error('登录失败！')
        isLoading.value = false;
      }
    } else {
      ElMessage.warning('请填写正确的验证码！')
    }
  })
}
</script>
<style lang="scss" scoped>
.phoneFrom {
  height: 300px;

  .phone-input {
    display: flex;
    width: 100%;

    span {
      border: 1px solid #ccc;
      width: 20%;
      text-align: center;
      color: #ccc;
    }

    .el-input {
      flex: 1;
    }
  }

  .code-input {
    display: flex;
    width: 100%;

    .el-input {
      flex: 1;

    }

    .el-button {
      width: 28%;
      margin-left: 10px;
    }
  }
}
</style>
